const components = {
  MuiCssBaseline: {
    styleOverrides: {
      '*': {
        boxSizing: 'border-box',
      },
      html: {
        height: '100%',
        width: '100%',
      },
      body: {
        height: '100%',
        margin: 0,
        padding: 0,
      },
      '#root': {
        height: '100%',
      },
      a: {
        textDecoration: 'none',
      },
      'pre': {
        margin: '8px 0',
        overflow: 'auto',
        padding: '15px',
        wordWrap: 'normal',
        fontSize: '16px',
        fontFamily: 'Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace',
      },
      '.hljs-keyword': {
        color: '#07a',
      },
      '.hljs-title,.hljs-type': {
        color: '#58727e',
      },
      '.hljs-string': {
          color: '#9a6e3a',
      },
      '.hljs-title.function_': {
          color: '#dd4a68'
      },
      '.hljs-tag,.hljs-number': {
          color:'#905',
      },
      '.hljs-tag .hljs-attr': {
          color: '#690'
      },
      '.hljs-tag .hljs-string': {
          color: '#07a'
      },
      '.hljs-comment': {
          color: '#999',
          fontSize: '14px',
          fontWeight: '400'
      },
      '.hljs-built_in': {
          color: '#dd4a68'
      },
      '.hljs-literal': {
          color: '#dd4abd'
      },
      '.hljs-meta': {
        color: '#999'
      },
      "*[dir='rtl'] .buyNowImg": {
        transform: 'scaleX(-1)',
      },
      '.language-jsx': {
        wordWrap: 'break-word',
        WebkitFontSmoothing: 'auto',
        borderRadius: '16px',
        display: 'block',
        fontFamily: 'Source Code Pro,Monaco,Inconsolata,monospace',
        fontSize: '14px',
        fontWeight: 400,
        lineHeight: '26px',
        overflow: 'auto',
        padding: '16px',
        position: 'relative',
        whiteSpace: 'pre-wrap'
      },
      '.language-bash': {
        display: 'block',
        padding: '1em',
        margin: '0.5em 0',
        backgroundColor: '#fafafa',
        borderRadius: 4
      },
      '.card': {
        borderRadius: '12px',
        marginBottom: '24px',
        padding: '24px',
        '>p>code, .demo-block-title>p>code': {
          WebkitFontSmoothing: 'antialiased',
          borderRadius: '4px',
          display: 'inline',
          fontFamily: 'inherit',
          fontSize: '14px',
          margin: '0 2px',
          padding: '2px 5px',
          wordBreak: 'keep-all'
        },
        '>table': {
          borderCollapse: 'collapse',
          fontSize: '14px',
          lineHeight: 1.5,
          marginTop: '12px',
          width: '100%'
        },
        '>table th': {
          fontWeight: 600,
          padding: '8px 10px',
          textAlign: 'left'
        },
        '>table td': {
          borderTop: '1px solid #f1f4f8',
          padding: '8px',
          ':firstChild': {
            paddingLeft: 0
          }
        },
        '>table code': {
          WebkitFontSmoothing: 'antialiased',
          borderRadius: '4px',
          display: 'inline',
          fontFamily: 'inherit',
          fontSize: '14px',
          margin: '0 2px',
          padding: '2px 5px',
          wordBreak: 'keep-all'
        },
        '>table em': {
          WebkitFontSmoothing: 'auto',
          color: '#4fc08d',
          fontFamily: 'Source Code Pro,Monaco,Inconsolata,monospace',
          fontSize: '14px',
          fontStyle: 'normal'
        },
        '>h3': {
          fontSize: '18px',
          fontWeight: 600,
          marginBottom: '16px'
        },
        '>p': {
          margin: '16px 0',
          color: '#34495e',
          fontSize: '15px',
          lineHeight: '26px'
        }
      },
      '.doc-container': {
        display: 'flex',
        justifyContent: 'space-between',
        padding: 10,
        width: '100%'
      },
      '.md-mobile .code-container, .md-pc .demo-container': {
        flex: 1,
        width: '100%',
        'h1': {
          fontSize: '28px',
          fontWeight: 400,
          margin: '0 0 30px'
        },
        'h2': {
          fontSize: '25px',
          fontWeight: 400,
          margin: '45px 0 20px'
        }
      },
      '.control-block': {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '36px',
        textAlign: 'center',
        color: '#d3dce6',
        cursor: 'pointer',
        transition: '.2s',
        position: 'relative',
        '> span': {
            display: 'block',
            width: '44px',
            height: '36px',
            transition: 'all 0.3s',
            opacity: 0.7
        }
      },
      '.card.show': {
        '.code-block': {
            maxHeight: '100vh',
            overflowY: 'auto',
            opacity: 1
        },
        '.control-block span': {
          transform: 'rotate(180deg)'
        }
      },
      '.card.hide': {
        '.code-block': {
            maxHeight: '0px',
            overflowY: 'auto',
            opacity: 0
        }
      },
      '.md-mobile': {
        '.code-container': {
          flex: 1,
          paddingRight: 350
        },
        '.demo-container': {
          position: 'fixed',
          top: '80px',
          right: '24px',
          borderRadius: '36px',
          boxSizing: 'border-box',
          height: '637px',
          overflow: 'hidden',
          padding: '32px 8px 36px',
          width: '336px',
          minWidth: '336px',
          marginLeft: '30px',
          zIndex: 1,
          '.card': {
            margin: '10px 0 0',
            padding: '8px 12px',
            borderRadius: '0',
            boxShadow: 'none'
           },
          '.code-block, .md-api, .control-block': {
            display: 'none'
          },
          '.md-demo,.md-api': {
            padding: '8px',
            '>h1': {
              alignItems: 'center',
              borderRadius: '14px 14px 0 0',
              display: 'flex',
              fontFamily: 'Roboto-Medium,Roboto',
              fontSize: '17px',
              fontWeight: 500,
              height: '50px',
              justifyContent: 'center',
              position: 'sticky',
              textTransform: 'capitalize',
              top: 0,
              width: '100%',
              margin: 0,
              zIndex: 9
            },
            '.demo-block-title': {
              '>h2': {
                  color: 'rgba(69,90,100,.6)',
                  fontSize: '14px',
                  fontWeight: 400,
                  lineHeight: '16px',
                  margin: 0,
                  padding: '8px 0 12px'
              }
            }
          },
          '.demo-block-title': {
            '*': {
              display: 'none'
            },
            '> h3': {
              display: 'block',
              fontSize: 14,
              fontWeight: 400,
              margin: 0,
              padding: '8px 0 12px'
            }
          }
        }
      },
      '.md-pc': {
        display: 'block',
        // paddingRight: '20px',
        '.code-container': {
          display: 'none',
          paddingRight: '120px',
        },    
        '.demo-block-title': {
          '>h3': {
              fontSize: '18px',
              fontWeight: 600,
              marginBottom: '16px'
          },
          '> p': {
              margin: '16px 0',
              color: '#34495e',
              fontSize: '15px',
              lineHeight: '26px',
              '>code': {
                  WebkitFontSmoothing: 'antialiased',
                  borderRadius: '4px',
                  display: 'inline',
                  fontFamily: 'inherit',
                  fontSize: '14px',
                  margin: '0 2px',
                  padding: '2px 5px',
                  wordBreak: 'keep-all'
              }
          }
        }
      },
      '.light': {
        '.code-container': {
          'h1, h2, h3': {
            color: '#323233',
          }
        },
        '.card': {
          backgroundColor: '#fff',
          boxShadow: '0 8px 12px #ebedf0',
          '>table': {
            color: '#34495e'
          },
          '> p > code, >table code': {
            background: '#f7f8fa'
          },
          '>p': {
            color: '#34495e'
          },
          '.demo-block-title >h3': {
            color: 'rgba(69,90,100,.6)'
          }
        },
        'pre .language-js': {
          display: 'block',
          padding: '1em',
          borderRadius: 16,
          background: '#fafafa',
        },
        'pre .language-jsx': {
          background: '#fafafa',
        },
        'pre': {
          color: '#000'
        },
        'language-jsx': {
          color: '#999'
        },
        '.md-mobile': {
          '.md-demo,.md-api': {
            '>h1': {
              color: '#333'
            },
            '>h1, .demo-block': {
              backgroundColor: '#fff',
            },
            '.demo-block-title': {
              '>h2': {
                color: 'rgba(rgba(69,90,100,.6))'
              },
              '>p >code': {
                backgroundColor: '#f7f8fa',
              }
            }
          },
          '.demo-container': {
            background: 'url() 50% no-repeat',
            boxShadow: '0 4px 12px #ebedf0',
          },
          '.demo-block-title >p': {
            color: '#34495e',
            '> code': {
              background: '#f7f8fa'
            }
          },
        },
        '.control-block > span': {
          background: 'url("") center center no-repeat',
          backgroundSize: '20px auto',
        }
      },
      '.dark': {
        '.code-container': {
          'h1, h2': {
            color: '#fff',
          }
        },
        '.language-bash': {
          display: 'block',
          padding: '1em',
          margin: '0.5em 0',
          backgroundColor: '#001E3C',
          borderRadius: 4
        },
        '.card': {
          backgroundColor: '#32363e',
          boxShadow: '0 8px 12px #000',
          '>table': {
            color: '#f5f5f5'
          },
          '> p > code, >table code': {
            background: '#767e89'
          },
          '>p': {
            color: '#f5f5f5'
          } 
        },
        'pre .language-jsx': {
          background: '#001E3C'
        },
        'pre': {
          color: '#F5F5F5'
        },
        'language-jsx': {
          color: '#999'
        },
        '.md-demo,.md-api': {
          '>h1': {
            color: '#f5f5f5'
          },
          '.demo-block': {
            backgroundColor: '#32363e',
          },
          '.demo-block-title': {
            '>h2': {
              color: 'rgba(255,255,255,.6)'
            },
          }
        },
        '.md-mobile .demo-container': {
          background: 'url() 50% no-repeat',
          boxShadow: '0 4px 12px #000',
        },
        '.demo-block-title >p': {
          color: '#f5f5f5',
          '> code': {
            background: '#767e89'
          }
        },
        '.control-block > span': {
          background: 'url("") center center no-repeat',
          backgroundSize: '20px auto',
        }
      },
      '.isMobile': {
        '.code-container': {
          display: 'none',
          'h1': {
            fontSize: 20
          },
          'h2': {
            fontSize: 18
          },
          'h3': {
            fontSize: 16
          },
          'p': {
            fontSize: 14
          }
        },
        '.md-mobile .demo-container': {
          margin: 0,
          position: 'relative',
          top: 0,
          left: 0,
          width: '100%',
          height: 'auto',
          padding: 0,
          background: 'none !important',
          boxShadow: 'none !important',
        },
        '.demo-block-title': {
          '*': {
            display: 'inline-block !important'
          },
        },
        '.demo-container .code-block, .md-api': {
          display: 'block !important'
        },
        '.control-block': {
          display: 'flex !important'
        },
        '.md-mobile': {
          padding: 0,
          '.md-demo >h1': {
            background: 'none',
            justifyContent: 'left'
          }
        },
        '&.light': {
          '.md-demo >h1,.md-api >h2': {
            fontSize: 24,
            color: 'rgba(0,0,0,.54)'
          }
        },
        '&.dark': {
          '.md-demo >h1,.md-api >h2': {
            fontSize: 24,
          }
        },
        '&.hideInSimulator .code-container': {
          display: 'block'
        },
      },
      '.hideInSimulator': {
        '.md-mobile': {
          '.code-container': {
            paddingRight: 0
          },
          '.demo-container': {
            display: 'none'
          }
        },
        '.md-pc': {
          '.demo-container': {
            flex: '1'
          }
        }
      },
      '.buyNowImg': {
        position: 'absolute',
        right: '-44px',
        top: '-18px',
        width: '143px',
        height: '175px',
      },
      '.MuiCardHeader-action': {
        alignSelf: 'center !important',
      },
      '.scrollbar-container': {
        borderRight: '0 !important',
      },
      "*[dir='rtl'] .welcomebg:before": {
        backgroundPosition: 'top -24px left -9px !important',
      },
    },
  },
  MuiContainer: {
    styleOverrides: {
      root: {
        paddingLeft: '15px !important',
        paddingRight: '15px !important',
        maxWidth: '1600px',
      },
    },
  },

  MuiButton: {
    styleOverrides: {
      root: {
        textTransform: 'none',
        boxShadow: 'none',
        fontSize: '15px',
        '&:hover': {
          boxShadow: 'none',
        },
      },
    },
  },

  MuiListItem: {
    styleOverrides: {
      root: {
        borderRadius: '9px',
      },
    },
  },

  MuiCard: {
    styleOverrides: {
      root: {
        borderRadius: '20px',
        padding: '14px',
        margin: '15px',
        boxShadow: '0px 7px 30px 0px rgba(90, 114, 123, 0.11)',
      },
    },
  },

  MuiListItemIcon: {
    styleOverrides: {
      root: {
        minWidth: '40px',
      },
    },
  },

  MuiGridItem: {
    styleOverrides: {
      root: {
        paddingTop: '30px',
        paddingLeft: '30px !important',
      },
    },
  },
  MuiLinearProgress: {
    styleOverrides: {
      root: {
        backgroundColor: '#ecf0f2',
        borderRadius: '6px',
      },
    },
  },
  MuiMenuItem: {
    styleOverrides: {
      root: {
        borderRadius: '0',
      },
    },
  },
  MuiChip: {
    styleOverrides: {
      root: {
        fontWeight: '500',
        fontSize: '0.75rem',
      },
    },
  },
};

export default components;
